<template>
    <div shadow="hover">
        <div ref="echarts1" style="height: 180px;width: 500px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            // currentPage: 1,
            // totalPage: 0,
        }
    },
    // methods: {
    //     async getData () {
    //     const {data: ret} = await this.$http.get('seller')
    //     this.allData = ret
    //     this.data1.sort((a, b) => {
    //       return a.value - b.value
    //     })
    //     this.totalPage = this.data1.length % 5 === 0 ? this.data1.length / 5 : this.data1.length / 5 + 1
    //     this.updateChart()
    //     this.setInterval()
    //     this.startInterval()
    //     },
    //     startInterval () {
    //     if(this.timeId) {
    //         clearInterval(this.timeId)
    //     }
    //     this.timeId = setInterval(() => {
    //         this.startValue++
    //         this.endValue++
    //         if(this.endValue > this.allData.length - 1) {
    //           this.startValue = 0
    //           this.endValue = 5
    //         }
    //         this.updateChart()
    //     },2000)
    //     }
    // },
    mounted() {
        const echarts1 = echarts.init(this.$refs.echarts1)
        let data1 = [
            {
                name: '2016',
                value: 175.17,
            },
            {
                name: '2017',
                value: 148.35,
            },
            {
                name: '2018',
                value: 95.36,
            },
            {
                name: '2019',
                value: 56,
            },
            {
                name: '2020',
                value: 45,
            },
            {
                name: '2021',
                value: 34,
            },
            {
                name: '2022',
                value: 95.36,
            },
        ];
        let xAxisData = [];
        let seriesData = [];
        let seriesData1 = [];
        let ciolData = [];
        let sum = 0;
        let bottomData = [];
        let topData = [];
        let ciolColor1 = [
            'rgba(8, 177, 255, 1)',
            'rgba(0, 255, 136,   1)',
            'rgba(8, 177, 255, 1)',
            'rgba(251, 171, 88,   1)',
            'rgba(8, 177, 255, 1)',
            'rgba(251, 171, 88,   1)',
            'rgba(8, 177, 255, 1)',
            'rgba(251, 171, 88,   1)',
        ];
        let ciolColor0 = [
            'rgba(107, 255, 243,  1)',
            'rgba(97,253,196,  1)',

            'rgba(107, 255, 243,  1)',
            'rgba(253, 221, 97,  1)',

            'rgba(107, 255, 243,  1)',
            'rgba(253, 221, 97,  1)',
            'rgba(107, 255, 243,  1)',
            'rgba(253, 221, 97,  1)',
        ];
        let bottomColor0 = [
            'rgba(8, 177, 255, 0.8)',
            'rgba(0, 255, 136, 0.8)',

            'rgba(8, 177, 255, 0.8)',
            'rgba(251, 171, 88, 0.8)',

            'rgba(8, 177, 255, 0.8)',
            'rgba(251, 171, 88, 0.8)',
            'rgba(8, 177, 255, 0.8)',
            'rgba(251, 171, 88, 0.8)',
        ];
        let bottomColor1 = [
            'rgba(107, 255, 243, 0.8)',
            'rgba(100,253,212,0.8)',

            'rgba(107, 255, 243, 0.8)',
            'rgba(253, 227, 100,0.8)',

            'rgba(107, 255, 243, 0.8)',
            'rgba(253, 227, 100,0.8)',
            'rgba(107, 255, 243, 0.8)',
            'rgba(253, 227, 100,0.8)',
        ];
        let header0 = [
            'rgba(8, 177, 255, 1)',
            'rgba(0, 255, 136, 1)',

            'rgba(8, 177, 255, 1)',
            'rgba(251, 171, 88, 1)',

            'rgba(8, 177, 255, 1)',
            'rgba(251, 171, 88, 1)',
            'rgba(8, 177, 255, 1)',
            'rgba(251, 171, 88, 1)',
        ];
        let header1 = [
            'rgba(107, 255, 243, 1)',
            'rgba(100,253,212,1)',

            'rgba(107, 255, 243, 1)',
            'rgba(253, 227, 100,1)',

            'rgba(107, 255, 243, 1)',
            'rgba(253, 227, 100,1)',
            'rgba(107, 255, 243, 1)',
            'rgba(253, 227, 100,1)',
        ];
        let bottom = [
            'rgba(31, 194, 252, 0.4)',
            'rgba(0, 255, 136, 0.4)',
            'rgba(31, 194, 252, 0.4)',
            'rgba(253, 179, 88, 0.4)',
            'rgba(31, 194, 252, 0.4)',
            'rgba(253, 179, 88, 0.4)',
            'rgba(31, 194, 252, 0.4)',
            'rgba(253, 179, 88, 0.4)',
            'rgba(31, 194, 252, 0.4)',
            'rgba(253, 179, 88, 0.4)',
        ];

        data1.forEach((item) => {
            xAxisData.push(item.name);
            seriesData.push(item.value);
            seriesData1.push({ name: '', value: item.value });
            ciolData.push({ name: '', value: '0' });
            sum += item.value;
        });
        data1.forEach((item) => {
            bottomData.push({ name: '', value: sum - item.value });
            topData.push({ name: '', value: sum });
        });
        let option = {
            title:{
                text: '各年份招生人数统计图',
                textStyle:{
                    color:'#ccc',//统计图标题的文字颜色
                    fontSize: 15,
                }
            },
            // backgroundColor: '#222733',
            grid: {
                top: '22',
                left: '37',
            },
            tooltip: {
                // trigger: 'axis',
                show: true,
                formatter: function (params) {
                    let text =
                        '<p  style="font-size:16px;font-weight: 400;color:rgba(255, 255, 255, 1);margin-bottom: 20px;"><span style="display:inline-block;width:10px;height: 10px;background: ' +
                        v2L2Chart.color[params.dataIndex] +
                        ';border-radius: 50%;margin-right: 10px;"></span>' +
                        v2L2Chart.xData[params.dataIndex] +
                        '：' +
                        v2L2Chart.data[params.dataIndex] +
                        '万</p>';
                    return text;
                },
                // formatter: (params) => {
                //     return v2L2Chart.xData[params.dataIndex] + ':' + v2L2Chart.data[params.dataIndex] + '万';

                // },
                backgroundColor: 'rgba(38, 68, 110, 0.8)',
                padding: 10,
                borderColor: 'rgba(38, 68, 110, 1)',
                textStyle: {
                    color: '#fff',
                },
            },

            xAxis: {
                offset: 10,
                data: xAxisData,
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                    },
                },
            },
            yAxis: {
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
            series: [
                //'最低下的圆片',
                {
                    name: '最低下的圆片',
                    stack: 'a',
                    // type: 'pictorialBar',
                    // symbolSize: [33, 12],
                    // symbolOffset: [0, 6],
                    type: 'effectScatter',
                    symbolSize: [32, 12],
                    symbolOffset: [0, 0],
                    z: 2,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: ciolColor0[params.dataIndex],
                                    },
                                    {
                                        offset: 0,
                                        color: ciolColor1[params.dataIndex],
                                    },
                                ]);
                            },
                        },
                    },
                    data: ciolData,
                },
                //下半截柱状图
                {
                    name: '下半截柱状图',
                    stack: 'a',
                    type: 'bar',
                    barWidth: 33,
                    z: 2,
                    barGap: '-100%',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: bottomColor1[params.dataIndex],
                                    },
                                    {
                                        offset: 0,
                                        color: bottomColor0[params.dataIndex],
                                    },
                                ]);
                            },
                        },
                    },
                    data: seriesData1,
                },
                //替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20'
                {
                    name: '替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20',
                    // stack: '',
                    type: 'bar',
                    barWidth: 33,
                    barGap: '-100%',
                    // stack: '广告',
                    itemStyle: {
                        color: 'transparent',
                    },
                    data: seriesData,
                },
                //头部1
                {
                    name: '头部1',
                    stack: 'a',
                    type: 'pictorialBar',
                    symbolSize: [33, 12],
                    symbolOffset: [0, -6],
                    z: 22,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: header1[params.dataIndex],
                                    },
                                    {
                                        offset: 0,
                                        color: header0[params.dataIndex],
                                    },
                                ]);
                            },
                        },
                    },
                    symbolPosition: 'end',
                    label: {
                        formatter: '{c} 万',
                        color: '#fff',
                        offset: [0, -5],
                        show: true,
                        position: 'top',
                        fontSize: 12,
                        fontWeight: 400,
                        fontFamily: 'zcool-gdh',
                    },
                    data: seriesData1,
                },
                //头部2
                {
                    name: '头部2',
                    stack: 'a',
                    type: 'pictorialBar',
                    symbolSize: [33, 12],
                    symbolOffset: [0, -6],
                    symbolPosition: 'end',
                    z: 22,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: header1[params.dataIndex],
                                    },
                                    {
                                        offset: 0,
                                        color: header0[params.dataIndex],
                                    },
                                ]);
                            },
                        },
                    },
                    data: topData,
                },
                //底色
                {
                    name: '底色',
                    stack: 'a',
                    type: 'bar',
                    barWidth: 33,
                    z: 2,
                    barGap: '-100%',
                    // stack: '',
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return bottom[params.dataIndex];
                            },
                        },
                    },
                    data: bottomData,
                },
            ],
        };
        echarts1.setOption(option)
    }
};
</script>
<style scoped>

</style>